<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="container">
          <div class="head">
            <div>
              <span style="font-size: 16px" class="title">产品信息</span>
            </div>
            <el-button @click="$router.go(-1)">返回</el-button>
          </div>
          <div class="flex">
            <p>
              <span class="title">产品名称：</span>{{ detail.chanpinmingcheng }}
            </p>
            <p class="ml50">
              <span class="title">一级分类：{{ detail.chanpinleixing1 }}</span>
            </p>
            <p class="ml50">
              <span class="title">二级分类：</span>{{ detail.chanpinleixing2 }}
            </p>
            <p class="ml50">
              <span class="title">三级分类：</span>{{ detail.chanpinleixing3 }}
            </p>
          </div>
          <div class="flex">
            <p><span class="title">供应商：</span>{{ detail.gongyingshang }}</p>
          </div>
          <div
            class="flex"
            v-for="(item, index) in detail.chanpinguige"
            :key="index"
          >
            <p><span class="title">规格：</span>{{ item.guigemingcheng }}</p>
            <p class="ml50 red">￥{{ item.jiage }}</p>
          </div>
          <div class="intro-img flex">
            <div
              class="show-box"
              v-for="(item, index) in detail.chanpinjieshao"
              :key="index"
            >
              <img v-if="item.fileType != 'mp4'" :src="item.filePath" alt="" />
              <video controls v-else :src="item.filePath"></video>
            </div>
          </div>
          <div class="flex">
            <p><span class="title">收藏数: </span>{{ detail.shoucangshu }}</p>
          </div>
          <div class="flex">
            <p style="width: 50%">
              <span class="title">备注：</span>{{ detail.beizhu }}
            </p>
          </div>
          <div class="flex">
            <p>
              <span class="title">审核状态: </span
              >{{
                detail.shenhe?.code == 0
                  ? "待审核"
                  : detail.shenhe?.code == 1
                  ? "审核通过"
                  : "审核未通过"
              }}
            </p>
          </div>
          <div class="bottom"></div>
        </div>
        <div class="providerTable">
          <el-tabs
            @tab-click="tabChange"
            v-model="activeName"
            class="provider-tabs"
          >
            <el-tab-pane class="principalInfo" label="产品详情" name="1">
              <div v-html="detail.chanpinxiangqing"></div>
              <div
                v-if="detail.shenhe?.code == 0 && check === '1'"
                class="operation flex-s"
              >
                <el-button @click="review(1)" size="large">通过</el-button>
                <el-button
                  class="ml50"
                  @click="review(-1)"
                  size="large"
                  type="primary"
                  >不通过</el-button
                >
              </div>
              <el-dialog
                class="list-dialog"
                show-close="false"
                width="40%"
                v-model="show"
                center
                style="padding: 0 30px"
              >
                <el-form :model="form">
                  <el-form-item label="不通过原因：">
                    <el-input
                      v-model="form.shenheBeizhu"
                      :maxlength="150"
                      type="textarea"
                      :rows="8"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <el-form-item class="note-button-group">
                  <el-button size="large" @click="show = false">取消</el-button>
                  <el-button
                    class="ml50"
                    size="large"
                    type="primary"
                    @click="submitForm"
                  >
                    提交
                  </el-button>
                </el-form-item>
              </el-dialog>
            </el-tab-pane>
            <el-tab-pane class="principalInfo" label="产品专家信息" name="2">
              <el-button
                class="changeExpert"
                type="primary"
                size="large"
                @click="onOperation({}, 'changeExpert')"
                >更换专家</el-button
              >
              <div class="principal">
                <div class="principalTable expert">
                  <div class="principal-list">
                    <div class="introduction">
                      <div
                        v-if="
                          expertDetail.zhuanjiazhaopian &&
                          expertDetail.zhuanjiazhaopian.length > 0
                        "
                        class="avatar"
                      >
                        <img
                          :src="expertDetail.zhuanjiazhaopian[0].filePath"
                          alt=""
                        />
                      </div>
                      <div class="intro-right">
                        <div class="right-head">
                          <span class="title">{{
                            expertDetail.zhuanjiamingcheng
                          }}</span>
                          <span class="ml40"
                            >手机：{{ expertDetail.lianxifangshi }}</span
                          >
                          <span class="ml40"
                            >邮箱：{{ expertDetail.youxiang }}</span
                          >
                        </div>
                        <p class="mt15">{{ expertDetail.yewuleixing }}</p>
                      </div>
                    </div>
                    <p class="title mt10">
                      项目业绩：{{ expertDetail.xiangmuyeji }}
                    </p>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane class="achievement" label="项目案例" name="3">
              <div class="head">
                <div class="left">
                  <el-input
                    placeholder="请输入名称"
                    v-model="demoParams.xiangmumingcheng"
                    style="width: 350px"
                    size="large"
                  >
                    <template #append>
                      <el-button
                        @click="GetDemoList"
                        style="min-width: 50px"
                        icon="Search"
                      />
                    </template>
                  </el-input>
                  <el-select
                    width="150"
                    show-border
                    class="ml20"
                    v-model="demoParams.xiangmuleixing"
                    size="large"
                    placeholder="类型"
                    clearable
                    @change="GetDemoList"
                  >
                    <el-option
                      v-for="item in demoType"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    >
                      {{ item.dicLabel }}
                    </el-option>
                  </el-select>
                </div>
              </div>
              <el-table
                border
                :data="demoList"
                style="width: 100%; margin-top: 40px"
              >
                <el-table-column property="xmNo" label="编号" align="center" />
                <el-table-column
                  property="xiangmumingcheng"
                  label="项目名称"
                  align="center"
                />
                <el-table-column
                  property="chengshi"
                  label="城市（省市区）"
                  align="center"
                />
                <el-table-column
                  property="xiangmuleixing"
                  label="类型"
                  align="center"
                />
                <el-table-column
                  property="xiangmudizhi"
                  label="项目地址"
                  align="center"
                />
                <el-table-column
                  property="zhuangtai"
                  label="项目状态"
                  align="center"
                />
                <el-table-column
                  property="yunyingshang"
                  label="项目运营商"
                  align="center"
                />
                <el-table-column
                  property="xiangmufuzeren"
                  label="项目负责人"
                  align="center"
                />
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button
                      v-if="check === '1'"
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'demoDetail')"
                      >详情</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <h-page
                v-if="demoTotal"
                v-model:curr-page="demoParams.current"
                :size="demoParams.size"
                :total="demoTotal"
                @change="GetDemoList"
              />
            </el-tab-pane>
            <el-tab-pane
              class="principalInfo expertComment"
              label="专家评论"
              name="4"
            >
              <div class="principal">
                <div class="principalTable">
                  <div
                    class="principal-list"
                    v-for="(item, index) in commentList"
                    :key="index"
                  >
                    <div class="introduction">
                      <div
                        class="avatar"
                        v-if="
                          item.zhuanjiazhaopian &&
                          item.zhuanjiazhaopian.length > 0
                        "
                      >
                        <img :src="item.zhuanjiazhaopian[0].filePath" alt="" />
                      </div>
                      <div class="intro-right comment">
                        <div class="right-head flex-b">
                          <span class="title">{{
                            item.zhuanjiamingcheng
                          }}</span>
                          <span
                            v-if="item?.renzhengjiav?.code == 1"
                            class="title ml10"
                            style="color: #159bd5"
                            >认证V</span
                          >
                        </div>
                        <p class="mt15">{{ item.yewuleixing }}</p>
                      </div>
                    </div>
                    <p class="time">{{ item.createTime }}</p>
                    <div class="comment-button flex-b mt20">
                      <p class="title">{{ item.liuyanneirong }}</p>
                      <div class="button-group">
                        <el-button
                          style="min-width: 80px"
                          size="small"
                          type="primary"
                          @click="onOperation({ id: item.id }, 'addTop')"
                          >{{
                            item?.zhiding?.code == 1 ? "取消置顶" : "置顶"
                          }}</el-button
                        >
                        <el-button
                          style="min-width: 80px"
                          size="small"
                          type="primary"
                          @click="onOperation({ id: item.id }, 'addV')"
                          >{{
                            item?.renzhengjiav?.code == 1 ? "取消加V" : "加V"
                          }}</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <h-page
                v-if="commentTotal"
                v-model:curr-page="commentParams.current"
                :size="commentParams.size"
                :total="commentTotal"
                @change="GetCommentList"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import {
  AddTopProductComment,
  AddVProductComment,
  GetProductCommentList,
  GetProductDemoList,
  GetProductDetail,
  GetProductExpertDetail,
  ReviewProduct,
} from "@/api/product";
import { useRoute, useRouter } from "vue-router";
import { baseMsg } from "@/utils/utils";
import { GetDictionaryTree } from "@/api/system";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      detail: {},
      activeName: "1",
      typeOption: {},
      show: false,
      check: localStorage.getItem("check"),
      // 审核表单
      form: {
        id: "",
        shenheBeizhu: "",
        shenhe: null,
      },

      // 产品专家信息
      expertParams: {
        cpNo: "",
      },
      expertDetail: {},

      // 项目案例
      demoParams: {
        current: 1,
        size: 10,
        cpNo: "",
        xiangmumingcheng: "",
        xiangmuleixing: "",
      },
      demoTotal: 0,
      demoType: [],
      demoList: [],

      // 专家评论
      commentParams: {
        current: 1,
        size: 20,
        cpNo: "",
      },
      commentList: [],
      commentTotal: 0,
    });
    const GetDetail = () => {
      GetProductDetail({ id: route.query.id }).then((res) => {
        if (res.code == 4201) {
          state.detail = res.data;
        }
      });
    };
    // 审核通过/不通过
    const review = (status) => {
      state.form.id = state.detail.id;
      state.form.shenhe = status;
      if (status === -1) {
        state.show = true;
      } else {
        ReviewProduct(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("操作成功");
            router.go(-1);
          }
        });
      }
    };
    // 审核不通过原因提交
    const submitForm = () => {
      ReviewProduct(state.form).then((res) => {
        if (res.code == 4202) {
          baseMsg("操作成功");
          router.go(-1);
        }
      });
    };
    // 获取产品专家信息
    const GetExpertDetail = () => {
      GetProductExpertDetail(state.expertParams).then((res) => {
        if (res.code == 4201) {
          state.expertDetail = res.data;
        }
      });
    };
    // 获取产品项目案例列表
    const GetDemoList = () => {
      GetProductDemoList(state.demoParams).then((res) => {
        if (res.code == 4201) {
          state.demoList = res.data.records;
          state.demoTotal = res.data.total;
        }
      });
    };
    // 获取专家评论列表
    const GetCommentList = () => {
      GetProductCommentList(state.commentParams).then((res) => {
        if (res.code == 4201) {
          state.commentList = res.data.records;
          state.commentTotal = res.data.total;
        }
      });
    };
    // tab栏切换
    const tabChange = (item) => {
      if (item.props.name == "2") {
        state.expertParams.cpNo = state.detail.cpNo;
        GetExpertDetail();
      }
      if (item.props.name == "3") {
        state.demoParams.cpNo = state.detail.cpNo;
        GetDemoList();
        // 获取项目类型下拉
        GetDictionaryTree({ dicModel: "xiangmuleixing" }).then((res) => {
          if (res.code == 4201) {
            state.demoType = res.data;
          }
        });
      }
      if (item.props.name == "4") {
        state.commentParams.cpNo = state.detail.cpNo;
        GetCommentList();
      }
    };
    // 操作
    const onOperation = (params, operation) => {
      // 更换专家
      if (operation === "changeExpert") {
        router.push({
          path: "/chanpin/changeExpert",
          query: {
            cpNo: state.detail.cpNo,
          },
        });
      }
      // 项目业绩详情
      if (operation === "demoDetail") {
        router.push({
          path: "/xiangmu/detail",
          query: {
            id: params.xmId,
          },
        });
      }
      // 置顶
      if (operation === "addTop") {
        AddTopProductComment(params).then((res) => {
          if (res.code == 4202) {
            GetCommentList();
            baseMsg("操作成功");
          }
        });
      }
      // 加V
      if (operation === "addV") {
        AddVProductComment(params).then((res) => {
          if (res.code == 4202) {
            GetCommentList();
            baseMsg("操作成功");
          }
        });
      }
    };
    watch(
      () => route.query,
      () => {
        state.commentParams.current = Number(route.query.page) || 1;
        state.demoParams.current = Number(route.query.page) || 1;
        GetDemoList();
        GetCommentList();
      },
      { deep: true }
    );
    GetDetail();
    return {
      ...toRefs(state),
      GetDetail,
      review,
      submitForm,
      tabChange,
      onOperation,
      GetExpertDetail,
      GetDemoList,
      GetCommentList,
    };
  },
});
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
  .container {
    padding: 50px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
    }
  }
}
.title {
  font-weight: bold;
  color: #000;
  font-size: 12px;
}
.flex {
  display: flex;
  margin-bottom: 30px;
}
p {
  font-size: 12px;
  color: #333333;
  &.red {
    color: #ff0000;
  }
}
.bottom {
  background-color: #ccc;
  height: 1px;
}
.providerTable {
  padding: 0px 50px 50px 50px;
}
.intro-img {
  .show-box {
    &:not(:first-child) {
      margin-left: 20px;
    }
    img,
    video {
      width: 140px;
      height: 80px;
      border-radius: 4px;
    }
  }
}
.principalInfo {
  position: relative;
  // 更换专家
  .changeExpert {
    position: absolute;
    right: 50px;
    top: -50px;
  }
  .principal {
    margin-top: 30px;
    .principalTable {
      margin-top: 15px;
      margin-bottom: 30px;
      border-radius: 6px;
      padding: 0 40px 0 15px;
      border: 1px solid #ccc;
      &.expert {
        margin-top: 60px;
      }
      .principal-list {
        &:not(:last-child) {
          border-bottom: 1px solid #ccc;
        }
        position: relative;
        padding: 20px 0;
        .introduction {
          display: flex;
          .avatar {
            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
            }
          }
          .intro-right {
            margin-left: 10px;
            font-size: 12px;
            &.comment {
              flex: 1;
            }
          }
        }
        .deleteButton {
          position: absolute;
          right: 40px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
.achievement {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.certifyInfo {
  .contain {
    & > div {
      margin-top: 40px;
      display: flex;
      p {
        margin-left: 2px;
      }
      &.top-bottom {
      }
      &.left-right {
        align-items: center;
        &.normal {
          align-items: baseline;
        }
      }
    }
  }
}
// 专家评论
.expertComment {
  position: relative;

  .button-group {
    display: flex;
    flex-wrap: nowrap;
    float: right;
    margin-left: 10px;
    margin-top: -30px;
  }
}
.operation {
  margin-top: 70px;
}
</style>
<style lang="scss">
.el-tabs__nav-wrap {
  &::after {
    display: none;
  }
}
.providerTable .el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
